import { useState } from 'react';
import axios from '@/utils/axios';
import { toast } from 'sonner';
// import roleSystem from '../../../shared/roleSystem.js'

const System = () => {
    const [address, setAddress] = useState('');
    const [role, setRole] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        console.log('提交变更:', { address, role });

        try {
            const response = await axios.post('api/v1/role/assign', {
                address,
                role: parseInt(role) // 转换为数字类型
            });

            toast.success(response.data.message || '角色分配成功');
            console.log('角色分配成功:', response.data.role);
            // setAddress('');
            // setRole('');
        } catch (error) {
            console.error('角色分配失败:', error);
            toast.error('角色分配失败');
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div>
            <h2 className="mb-4 text-xl font-bold">系统管理</h2>
            <div className="mb-6 border-b border-gray-200">
                <nav className="-mb-px flex space-x-8">
                    <button
                        className={`whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium border-[#673AB7] text-[#673AB7]`}
                    >
                        账户管理
                    </button>
                </nav>
            </div>

            <div className="rounded-md border border-gray-200 p-6 shadow-sm">
                <h3 className="mb-4 text-lg font-medium">变更身份</h3>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                            <label className="block text-sm font-medium text-gray-700">用户地址</label>
                            <input
                                type="text"
                                value={address}
                                onChange={(e) => setAddress(e.target.value)}
                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7]"
                                placeholder="输入以太坊地址"
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-700">身份类型</label>
                            <select
                                value={role}
                                onChange={(e) => setRole(e.target.value)}
                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7]"
                            >
                                <option value="">选择身份类型</option>
                                <option value="1">普通用户</option>
                                <option value="2">医院管理员</option>
                                <option value="3">保险公司员工</option>
                                <option value="4">系统管理员</option>
                            </select>
                        </div>
                    </div>
                    <div className="flex justify-end">
                        <button
                            type="submit"
                            className="rounded-md bg-[#673AB7] px-4 py-2 text-white hover:bg-[#9575CD]"
                        >
                            提交变更
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default System;